<template>
    <div class="user-box">
        <template>
            <el-row class="p-all-20 box-flex ">
                <el-col :span="5" >
                    <el-button type="success" @click="addUserInfo" size="mini">创建角色</el-button>
                    <el-button type="danger" @click="deleteAllAdmin" size="mini">批量删除</el-button>
                </el-col>
            </el-row>
            <div class="tab-div">
							<el-table :data="ruleList"  @selection-change="handleSelectionChange" style="width:100%">
								<el-table-column type="selection" width="55" :selectable="selectable">
								</el-table-column>
								<el-table-column label="用户角色" width="120">
									<template slot-scope="scope">{{ scope.row.name }}</template>
								</el-table-column>
								<el-table-column prop="permission" label="权限" width="120"></el-table-column>
								
								<el-table-column prop="createTime" label="创建时间" width="220"></el-table-column>
								<el-table-column label="操作" width="250" align="left">
									<template slot-scope="scope">
										<el-button @click="toAdminEditer(scope.$index,scope.row)" size='mini' type="primary" :disabled="scope.row.builtIn">修改</el-button>
										<el-button @click="toDeleteAdmin(scope.row)" size='mini' type="danger" :disabled="scope.row.builtIn">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
            
            <el-dialog :title="title" :visible.sync="centerDialogVisible" width="30%" center>
                <el-row class="p-all-20 ">
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 m-r-10">手机号</span>
                        <el-input type="请输入手机号" />
                    </el-col>
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 m-r-10">昵称</span>
                        <el-input type="请输入昵称" />
                    </el-col>
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 m-r-10">密码</span>
                        <el-input type="请输入密码" />
                    </el-col>
                    <el-col :span="20" class="box-flex m-b-10">
                        <span class="sp-w-50 ">角色</span>
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-col>
                </el-row>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                </span>
            </el-dialog>

        </template>
    </div>
</template>

<script>
    import currentPage from '@/components/current-page/current-page.vue'
    import {
        SUCCESS_REQUEST_STATUS
    } from '@/utils/config.js'

    export default {
        props: {
           
            menuList: {
                type: Array,
                required: false
            }

        },
        data() {
            return {
				ruleList: [],
				title:'新建用户',
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',
                pageSize: 10,
                currentPage: 10,
                pageTotal: 50,
				multipleSelection: [],
                centerDialogVisible: false
            }
        },
        created() {
			this._initRole()
            this._initData()
			
        },
        methods: {
			_initRole() {
				this.$ajax({
					api: 'rule/list'
				}).then(res => {
					console.log(res)
					if (res.status === SUCCESS_REQUEST_STATUS) {
						this.ruleList = res.data
						this._initData()
						
					}
				})

			},
        	selectable(row) {
        		if(row.builtIn){
					return false
				}else{
					return  true
				}
        	},
			deleteAllAdmin() {
				if(!this.multipleSelection.length) {
					this.$message({
						message: '请选择不是超级管理员的用户进行删除',
						type: 'warning'
					});
					return
				}
				let map = this.multipleSelection.map((item) => {return item.id}).join(',')
				
				this.$confirm("确定删除角色?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'rule/batchDelete',
						params: {
							ids: map
						}
					}).then(res => {
						if(res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.$emit('refresh')
						}else{
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					}).catch((err) => {
						this.$message({
							message: err.message,
							type: 'warning'
						});
					})
				})
				
			},
			handleSelectionChange(val){
				this.multipleSelection = val.filter((item) => { return !item.builtIn})
				
			},
			/**
			 * @desc 删除当前选中的用户
			 * @param item {Object} 
			 */
			toDeleteAdmin(item) {
				
				this.$confirm("确定删除此角色?", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					this.$ajax({
						api: 'rule/delete',
						params: {
							id: item.id
						}
					}).then(res => {
						if(res.status === SUCCESS_REQUEST_STATUS) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.$emit('refresh')
						}else{
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					}).catch((err) => {
						console.log(err)
						this.$message({
							message: err.message,
							type: 'warning'
						});
					})
				})
			},
			toAdminEditer(index, item) {
				this.title = '修改用户'
				this.$emit('addUserInfo', item.id)
			},
			addUserInfo() {
				this.$emit('addUserInfo')
			},
            _initData() {
                this.ruleList.forEach((item) => {
                    this.$ajax({
                        api: 'rule/info',
                        params: {
                            id: item.id
                        }
                    }).then(res => {
                        if (res.status === SUCCESS_REQUEST_STATUS) {
                            console.log(res.data.checkMenuList)
                            if (res.data.checkMenuList.length > 0) {
                                this.menuList.forEach((cel, index) => {
                                    if (res.data.checkMenuList[index]) {

                                        item.val += cel.name
                                    }
                                })
                            }
                        }
                    })
                })

            },
            handleCurrentChange(page) {
                this.currentPage = page
            },
            open4() {
                const h = this.$createElement;
                this.$msgbox({
                    title: '消息',
                    message: h('p', null, [
                        h('span', null, '内容可以是 '),
                        h('i', {
                            style: 'color: teal'
                        }, 'VNode')
                    ]),
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            setTimeout(() => {
                                done();
                                setTimeout(() => {
                                    instance.confirmButtonLoading = false;
                                }, 300);
                            }, 3000);
                        } else {
                            done();
                        }
                    }
                }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
                });
            }
        },
        components: {
            currentPage
        }

    }
</script>

<style>
    .user-box {
        width: 100%;
        max-width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				
    }
		.tab-div{
			flex: 1;
			overflow: auto;
		}
</style>
